% !Mode:: "TeX:UTF-8"

\chapter{前端静态网页项目}

\section{项目需求}
本项目参照 “饿了么官网网页版”制作，主要为制作首页和静态网页显示支付流程。

1.项目涉及到的技术架构：
   \begin{itemize}
   \item HTML5
   \item CSS3
   \item JavaScript（ES6 以上）
   \end{itemize}
2.可选用的开发工具
   \begin{itemize}
   \item Hbuilder
   \item Chrome 浏览器
   \end{itemize}
3.涉及的技术点
   \begin{itemize}
   \item HTML5标签的使用
   \item CSS3样式的使用
   \item JS 对 DOM 的基本操作
   \item DIV+CSS 布局基础
   \item 移动端布局基础
   \item viewport 设置
   \item 弹性布局
   \item 边框盒子模型
   \item vw 与 vh 的使用
   \item 图片按比例自适应
   \item CSS3 小图标的使用
   \item 第三方字体库的使用
   \end{itemize}


\section{项目设计}
本项目参照 “饿了么官网网页版”制作，显示效果与饿了么官网显示效果相同
   首页，完全按照“饿了么网页版”实际效果制作，相似度达到99%。
   本项目中的其它页面，专注于完成一个“点餐业务线”功能，所以其它页面效果会有适当的删减。

设计效果展示及说明：
\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.8\textwidth]{2.1.png}
   \caption{首页}\label{fig:2.1}
   \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.8\textwidth]{2.2.png}
   \caption{商家列表}\label{fig:2.2}
   \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.8\textwidth]{2.3.png}
   \caption{商家信息}\label{fig:2.3}
   \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.8\textwidth]{2.4.png}
   \caption{确认订单}\label{fig:2.4}
   \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.8\textwidth]{2.5.png}
   \caption{在线支付}\label{fig:2.5}
   \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.8\textwidth]{2.6.png}
   \caption{用户登录}\label{fig:2.6}
   \vspace{\baselineskip}
\end{figure}


\section{项目测试}
(1)测试写好的~html~文件是否可以在浏览器正常运行。
图\ref{fig:196_12}）与图\ref{fig:196_13}为
可以在浏览器中正常运行~html~。

\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.8\textwidth]{196_12.png}
   \caption{在浏览器中运行}\label{fig:196_12}
   \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.8\textwidth]{196_13.png}
   \caption{浏览器中效果}\label{fig:196_13}
   \vspace{\baselineskip}
\end{figure}

(2)测试设置光标在可点击位置的变化。
图\ref{fig:196_14}与图\ref{fig:196_15}分别为
光标悬停在右上角蓝色不可点击的位置和“美食”图标附近可点击的位置。

\begin{figure}[htbp]
   \begin{minipage}[t]{0.5\linewidth}
      \centering
      \includegraphics[width=0.85\textwidth]{196_14.jpg}
      \caption{光标在不可点击的位置}\label{fig:196_14}
   \end{minipage}
   \begin{minipage}[t]{0.5\linewidth}
      \centering
      \includegraphics[width=0.8\textwidth]{196_15.jpg}
      \caption{光标在可点击的位置}\label{fig:196_15}
   \end{minipage}
\end{figure}

(3)测试各个功能之间页面跳转正常。

~\\

\newpage
\section{开发过程记录}
\subsection{第一阶段}
(1)看视频学习前端开发相关知识点：~viewpoint~、弹性布局、视口尺寸、边框盒子、字体图标等。

(2)根据指导书搭建项目结构。如图~\ref{fig:196_1}~所示。
\begin{figure}[htbp]
   \centering
   \includegraphics[width=0.4\textwidth]{196_1.png}
   \caption{搭建项目结构}\label{fig:196_1}
   \vspace{\baselineskip}
\end{figure}

(3)~CSS~重置。不使用原始默认页面设置，用~reset.css~设计新的默认页面设置。如图~\ref{fig:196_2}~所示。
\begin{figure}[h]
   \centering
   \includegraphics[width=0.8\textwidth]{196_2.png}
   \caption{CSS重置}\label{fig:196_2}
   \vspace{\baselineskip}
\end{figure}

\clearpage
\subsection{第二阶段}
\begin{itemize}
   \item {开始编写各页面的~html~部分和~css~部分。}
\end{itemize}
此部分由缪妍和王明源两位同学共同完成。
缪妍同学负责首页（index）、商家信息页面（businessInfo）、确认订单页面（order）、注册页面（register）；
王明源同学负责商家列表页面（businessList）、在线支付页面（payment）、历史订单页面（orderList）、登录页面（login）。

\subsection{第三阶段}
\begin{itemize}
   \item {修改bug。}
   \begin{itemize}
      \item 解决~payment~页面中下拉箭头无效且在浏览器中报错的问题。
   \end{itemize}
\end{itemize}

~\\
\section{项目特色}
我认为本项目的特色是——移动端的前端开发。
因为不像~PC~端的屏幕尺寸相对固定，移动端的屏幕尺寸多变，
有可能会出现页面尺寸与屏幕尺寸不匹配，从而出现横向滚动条的情况。
为了解决这个问题，我们使用~viewport~，
将网页放入~layout~viewport~,再将~layout~viewport~等比缩小到~ideal~viewport~中。
这样来保证网页不出现横向滚动条。

接下来设置弹性盒子——“display: flex”，使元素按照弹性布局规则排列。
元素可以根据屏幕尺寸自动伸缩，实现页面中的内容自动适应屏幕大小。
在设置元素宽高时，使用视口尺寸如~vw~，可以实现元素宽高随屏幕大小自动成比例缩放。
加之，使用边框盒子模型，设置内边距和边框时不用担心会改变盒子总体尺寸。

总之，通过这些方法，我们可以很方便地设计出适应移动端屏幕的网页页面。

\newpage
\section{项目所遇到的问题和解决方法}
1.在设计首页（index）页面时，需为“推荐商家列表”的部分设置下边距， 给“底部菜单”部分留出位置，避免遮挡。根据视频教学中所教方式，
在 css 文件中设置“margin-bottom”，但是并没有像视频中显示的那样，将位置留出来。 尝试将“margin-bottom”替换成“padding-bottom”，
成功留出边距。根据我们的理解，“margin”表示外边距。但是原本“推荐商家列表”部分就占了剩余空间的所有部分，设置外边距相当于设置到屏幕以外的地方了。
而“padding”表示内边距。所以为了不被“底部菜单”遮挡，应该用内边距将“推荐商家部分”顶起。

2.在实现在线支付（payment）页面中下拉箭头展示订单细节这 一动作时，遇到了点击下拉箭头无效的问题。
一开始，我们根据浏览器页面中报的错（如图所示），考虑是否是“payment.js”这个文件出错。然后，
我们将自己的代码与视频所提供的代码逐行比对，并没有发现问题。之后，我们尝试重新写了一遍 “payment.html”和“payment.css”文件，
并且将之前的文件替换。结果下拉箭头无效的问题就解决了，浏览器也没有报错。

\begin{figure}[h]
   \centering
   \includegraphics[width=0.8\textwidth]{196_3.png}
   \caption{payment页面浏览器报错截图}\label{fig:196_3}
   \vspace{\baselineskip}
\end{figure}

\newpage
\section{结果及实验反思}
\subsection{实验结果}

完成前端静态页面设计。一下是部分页面截图。
\begin{figure}[h]
   \begin{minipage}[t]{0.3\linewidth}
      \centering
      \includegraphics[width=0.7\textwidth]{196_4.png}
      \caption{首页截图}\label{fig:196_4}
   \end{minipage}
   \begin{minipage}[t]{0.3\linewidth}
      \centering
      \includegraphics[width=0.7\textwidth]{196_5.png}
      \caption{商家列表页面}\label{fig:196_5}
   \end{minipage}
   \begin{minipage}[t]{0.3\linewidth}
      \centering
      \includegraphics[width=0.7\textwidth]{196_6.png}
      \caption{商家信息页面}\label{fig:196_6}
   \end{minipage}
 \end{figure}

 \begin{figure}[h]
   \begin{minipage}[t]{0.3\linewidth}
      \centering
      \includegraphics[width=0.7\textwidth]{196_7.png}
      \caption{确认订单页面}\label{fig:196_7}
   \end{minipage}
   \begin{minipage}[t]{0.3\linewidth}
      \centering
      \includegraphics[width=0.7\textwidth]{196_8.png}
      \caption{在线支付页面}\label{fig:196_8}
   \end{minipage}
   \begin{minipage}[t]{0.3\linewidth}
      \centering
      \includegraphics[width=0.7\textwidth]{196_9.png}
      \caption{登录页面}\label{fig:196_9}
   \end{minipage}
 \end{figure}

 \begin{figure}[h]
   \begin{minipage}[t]{0.4\linewidth}
      \centering
      \includegraphics[width=0.7\textwidth]{196_10.png}
      \caption{历史订单页面}\label{fig:196_10}
   \end{minipage}
   \begin{minipage}[t]{0.4\linewidth}
      \centering
      \includegraphics[width=0.7\textwidth]{196_11.png}
      \caption{注册页面}\label{fig:196_11}
   \end{minipage}
 \end{figure}
 
 \clearpage
 \subsection{实验反思}
 经过本此项目实验，我们学到了如何使用 HBuilder 写静态前端网页。与后端相比，写前端网页可能需要的逻辑思维会少一点，更多的是进行页面的设计。
  它的代码通常是一层层逐渐展开，又多又长。而且要每写一点就在浏览器里运行一下，看看是否出现我们期待的效果，否则会比较难找到是什么位置。
  因为在 HBuilder 里拼写等错误是没有提示的，所以要及时运行，及时发现，不然在退回去找会很麻烦。但是，只要跟着教学视频一点点仔细的写，
  还是比较容易完成的。 对我们来说，前端有一点比较令人苦恼，它有时报错的位置并不是实际出错的位置，甚至是毫不相干的错，需要一点一点捋。
  这次遇到的下拉箭头无法工作的问题，因为页面比较简单，所以重新写了一遍该页面，解决了问题。但是假如遇到复杂的页面，可能这种方法就不太合适了。
  所以更要细心，尽量不要出现这种问题。 总的来说，编写代码时，要养成细心的习惯。要在心里仔细分析，并且时刻 想着自己正在实现的内容在页面上如何呈现，
  这样会减少很多不必要的错误。 在本次实验中，我们第一次使用 LaTeX 写文档。初次使用会有些不习惯，遇到了一些问题，
  比如， LaTeX 通常会自己调节图片位置，但是反而变成我不希望的图文顺序。在调整图片文字的排版问题上我们花了些时间。
  但是，写了一部分后，我发现LaTeX也有他的方便之处。遇到一些问题，网上也会有各种解决办法，还是可以多尝试。
